<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<link rel="stylesheet" th:href="@{/css/login.css}" />
	<title>牛客网-账号设置</title>
</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
		<div th:replace="~{common/commons::topbar}"></div>

		<!-- 内容 -->
		<div class="main">
			<div class="container p-5 mt-3 mb-3">
				<!-- 上传头像 -->
				<h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
				<!--
				enctype="multipart/form-data"
				enctype就是encodetype就是编码类型的意思。
				multipart/form-data是指表单数据有多部分构成，既有文本数据，
				又有文件等二进制数据的意思。
				默认情况下，enctype的值是application/x-www-form-urlencoded，
				不能用于文件上传，只有使用了multipart/form-data，
				才能完整的传递文件数据。
				-->
				<!--
				上传到本地服务器
				<form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/uploadHeader}">
					<div class="form-group row mt-4">
						<label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
						<div class="col-sm-10">
							<div class="custom-file">
								<input type="file" class="custom-file-input" id="head-image"
									   name="headerImage" lang="es" required="">
								<label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
								<div class="invalid-feedback" th:text="${error}">
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<div class="col-sm-2"></div>
						<div class="col-sm-10 text-center">
							<button type="submit" class="btn btn-info text-white form-control">立即上传</button>
						</div>
					</div>
				</form>
				-->
                <!--上传带七牛云-->
                <form class="mt-5" id="uploadForm">
                    <div class="form-group row mt-4">
                        <label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
                        <div class="col-sm-10">
                            <div class="custom-file">
                                <input type="hidden" name="token" th:value="${uploadToken}">
                                <input type="hidden" name="key" th:value="${filename}">
                                <input type="file" class="custom-file-input" id="head-image"
                                       name="file" lang="es" required="">
                                <label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
                                <div class="invalid-feedback">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mt-4">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-10 text-center">
                            <button type="submit" class="btn btn-info text-white form-control">立即上传</button>
                        </div>
                    </div>
                </form>
				<!-- 修改密码 -->
				<h6 class="text-left text-info border-bottom pb-2 mt-5">修改密码</h6>
				<form class="mt-5" method="post" th:action="@{/user/updatePassword}">
					<div class="form-group row mt-4">
						<label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="old-password"
								   name="oldPassword" placeholder="请输入原始密码!" required>
							<div class="invalid-feedback">
								密码长度不能小于8位!
							</div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="new-password"
								   name="newPassword" placeholder="请输入新的密码!" required>
							<div class="invalid-feedback">
								密码长度不能小于8位!
							</div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control" id="confirm-password" placeholder="再次输入新密码!" required>
							<div class="invalid-feedback">
								两次输入的密码不一致!
							</div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<div class="col-sm-2"></div>
						<div class="col-sm-10 text-center">
							<button type="submit" class="btn btn-info text-white form-control">立即保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!-- 尾部 -->
		<div th:replace="~{common/commons::buttom}"></div>
	</div>

	<script th:src="@{/js/jquery.js}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js" crossorigin="anonymous"></script>
	<script th:src="@{/js/global.js}"></script>
	<script>
		$(function(){
            $("#uploadForm").submit(function () {
                $.ajax({
                    url: "https://upload-z2.qiniup.com",
                    method: "post",
                    processData: false,
                    contentType: false,
                    data: new FormData($("#uploadForm")[0]),
                    success: function (data) {
                        if (data && data.code === 200) {
                            // 更新头像访问路径
                            $.post(
                                CONTEXT_PATH + "/user/header/url",
                                { filename: $("input[name='key']").val() },
                                function (data) {
                                    if (data.code === 200) {
                                        window.location.reload();
                                    } else {
                                        alert(data.msg);
                                    }
                                }
                            );
                        } else {
                            alert("上传失败了！")
                        }
                    },

                });
                return false;
            })

			bsCustomFileInput.init();
		});
		$("#confirm-password").blur(function () {
			if ($("#new-password").val() !== $("#confirm-password").val()) {
				alert("两次输入的密码不一致");
			}
		});
	</script>
</body>
</html>
